<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>CMS</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/jumbotron.css" rel="stylesheet">
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
    <!--<link href="css/nav.css" rel="stylesheet">-->
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top"></nav>

<div>
    <div class="container">
        <ul class="nav nav-tabs">
            <li class="active"><a href="javascript:reLoad();">课程编排</a></li>
        </ul>
    </div>

    <div class="container">
        &nbsp;
    </div>

    <div class="container">
        <div class="panel panel-default">
            <div class="panel-heading">
                <form class="form-inline form-all" >
                    <div class="form-group">
                        <button type="button" class="btn btn-link" data-toggle="modal" data-target="#newModal" data-ext="add" >添加课程</button>
                		<select class="form-control" id="parent">
                       	</select>
                       	<select class="form-control" id="cid">
                       		<option value="">二级栏目</option>
                       	</select>
                        <div class="input-group">
                            <div class="input-group-addon">标题</div>
                            <input type="text" class="form-control" id="key" placeholder="标题" value="">
                        </div>
                    </div>
                    <button type="button" class="btn btn-primary" id="btn-sub">查询</button>
                </form>
            </div>
            <form id="form_sort">
	            <div class="table-responsive">
	                <table class="table table-hover table-striped">
	                    <thead>
	                    <tr>
	                        <th>#</th>
	                        <th>所属栏目</th>
	                        <th>标题</th>
	                        <th>状态</th>
	                        <th>排序</th>
	                        <th>操作</th>
	                    </tr>
	                    </thead>
	                    <tbody id="table-body"></tbody>
	                    <tr>
	                    	<td class="text-right" colspan="6">
	                    		<div id="sort" class="btn btn-primary">排序</div>
	                    	</td>
	                    </tr>
	                </table>
	            </div>
            </form>
            <nav style="text-align: right">
                <ul class="pagination"></ul>
            </nav>
        </div>
    </div>

</div>


<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/url.min.js"></script>
<script src="js/common.js"></script>
<script language="JavaScript">
    $(function(){
        auth();
        menu("category_lesson");
        $(".container").filter(":last").after(newModal);
        var page = $.url('?page');
        var key = $.url('?key');
        var pid = $.url('?pid');
        var cid = $.url('?cid');
        var opts = {"page":(page != null)?page:1,"count":20,"type": 2};
        if(cid != null && cid != ""){
            opts.cid = cid;
        }
        if(pid != "" && pid != undefined && pid != "undefined"){
        	opts.pid = pid;
       	 	api.categoryChildList(opts);
        }
        if(key != null && key != ""){
            opts.key = key;
            $("#key").val(key);
        }
        api.categoryLessonList(opts);
        api.categoryParentList(opts);
//      api.categoryChildList(opts);
        $('#newModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget);
            var ext = button.data('ext');
            var recipient = button.data('whatever');
            var title = button.data('rowid');
            var src = "";
            var pid = $("#parent").val();
            var cid = $("#cid").val();
            switch(ext)
            {
                case "edit":
                    title = "#"+title;
                    src = "lesson_edit.html?id="+recipient;
                    break;
                case "add":
                    title = "添加课程";
                    src = "category_lesson_add.html?pid="+pid+"&cid="+cid;
                    break;
            }
            var modal = $(this);
            modal.find('.modal-title').text(title);
            $("#newiframe").attr("src", src);
        });
        $('#newModal').on('hide.bs.modal', function (event) {
            reLoad();
        });
        
        $("#sort").on("click", function(){
			api.category_lesson_sort($("#form_sort").serialize());
        });
        
        $("#btn-sub").on("click", function(){
        	opts["pid"] = $("#parent").val();
        	opts["key"] = $("#key").val();
        	opts["cid"] = $("#cid").val();
        	opts["page"] = 1;
        	api.categoryLessonList(opts);
        });
        $("#parent").on("change", function(){
        	var op = {"pid": $("#parent").val()};
        	if($("#parent").val() == ""){
        		var h = '<option value="">二级栏目</option>';
        		$("#cid").html(h);
        	}else{
        		api.categoryChildList(op);
        	}
        });
    });
</script>
</body>
</html>